<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;background: red;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script src="../public.js"></script>
<script>

    var oBox = document.querySelector(".box")

    // oBox.onclick = function(){
    //     console.log(1);
    // }
    // oBox.onclick = function(){
    //     console.log(2);
    // }

    // 赋值式绑定事件重复绑定会覆盖，同一个元素的同一种事件，只能存在一个事件处理函数

    // 监听式绑定事件重复绑定会保留所有事件处理函数，触发事件时，执行当前元素的当前事件的所有事件处理函数

    // oBox.addEventListener("click", function (){
    //     console.log(1)
    // })
    // oBox.addEventListener("click", function (){
    //     console.log(2)
    // })

    // console.log( oBox.attachEvent )
    // console.log( oBox.addEventListener )


    

    function f1(){
        console.log("hello")
    }
    function f2(){
        this.style.background = randomColor()
    }

    addEvent(oBox, "click", f1)
    addEvent(oBox, "click", f2)

    removeEvent(oBox, "click", f2);
    removeEvent(oBox, "click", f1);

















    function addEvent(ele, type, cb){
        if(ele.attachEvent){
            ele.attachEvent("on"+type, cb);
        }else{
            ele.addEventListener(type, cb);
        }
    }

    function removeEvent(ele, type, cb){
        if(ele.detachEvent){
            ele.detachEvent("on"+type, cb);
        }else{
            ele.removeEventListener(type, cb);
        }
    }

    
    
</script>
</html>